<template>
	<view>
		<!-- <u-navbar back-icon-color="#FFFFFF" height="50" back-text="创建优惠券" :background="background" :back-text-style="{color: '#FFFFFF'}"></u-navbar> -->
		<view class="form">
			<u-form :model="form" ref="uForm" label-position="top" :label-style="labelStyle">
				<u-form-item label="类型" prop="type">
					<u-input v-model="form.type" type="select" @click="typeShow = true"/>
					<u-action-sheet :list="typeList" v-model="typeShow" @click="typeCallback"></u-action-sheet>
				</u-form-item>
				<u-form-item label="名称" prop="name">
					<u-input v-model="form.name" />
				</u-form-item>
				<u-form-item label="最低消费" prop="minimum">
					<text slot="right" style="color: #3B4664;">元</text>
					<u-input v-model="form.minimum" />
				</u-form-item>
				<u-form-item label="库存" prop="stock">
					<text slot="right" style="color: #3B4664;">张</text>
					<u-input v-model="form.stock" />
				</u-form-item>
				<u-form-item label="有效类型" prop="validType">
					<u-input v-model="form.validType" type="select" @click="validTypeShow = true" />
					<u-action-sheet :list="validTypeList" v-model="validTypeShow" @click="validTypeCallback"></u-action-sheet>
				</u-form-item>
				<u-form-item label="使用须知" prop="use">
					<u-input v-model="form.use" />
				</u-form-item>
			</u-form>
		</view>
		<view class="btn"><u-button shape="circle" @click="commitForm" type="primary">确定</u-button></view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			// 类型多选框
			typeShow: false,
			// 有效类型
			validTypeShow: false,
			labelStyle:{
				color:'#AEB3C0',
				'font-weight': 500,
				'font-family': 'PingFangSC-Medium, PingFang SC'
			},
			form:{
				type: '',
				name: '',
				minimum: '',
				stock: '',
				validType: '',
				use: ''
			},
			// 类型列表
			typeList: [
				{
					text: '代金券'
				},
				{
					text: '优惠券'
				}
			],
			validTypeList: [
				{
					text: '3日后过期'
				},
				{
					text: '7日后过期'
				}
			]
		}
	},
	methods:{
		typeCallback(e){
			this.form.type = this.typeList[e].text
		},
		validTypeCallback(e){
			this.form.validType = this.validTypeList[e].text
		},
		commitForm(){
			console.log('提交表单',this.form)
		}
	}
}
</script>

<style>
	.form{
		width: 90%;
		margin: 0 auto;
	}
	.u-form-item.data-v-006449ec{
		border-bottom: #EBEBEB solid 4rpx;
	}
	.btn{
		width: 496rpx;
		height: 88rpx;
		color: #FFFFFF;
		margin: 90rpx auto 0;
		font-size: 32rpx;
	}
</style>
